// 基础普通按钮样式
.mrz-btn {
    &.el-button {
        // 清除el-button自带外边距
        margin: 0 !important;
        background-color: #FFFFFF;
        color: #333333;
        border-color: #cccccc;

        &:hover {
            background-color: #f5f5f5;
            border-color: #b3b3b3;
        }
    }

    &.mrz-disabled {
        &.el-button {
            // 清除el-button自带外边距
            margin: 0 !important;
            // 显示鼠标禁用标识
            cursor: not-allowed;
            background-color: #F7F7F7;
            color: #999999;
            border-color: #F7F7F7;
        }
    }

    &.mrz-rounded {
        &.el-button {
            border-radius: 20px;
        }
    }

    &.mrz-plain {
        &.el-button {
            // 清除el-button自带外边距
            margin: 0 !important;
            background-color: #FFFFFF;
            color: #333333;
            border-color: #cccccc;

            &:hover {
                background-color: #f5f5f5;
                border-color: #b3b3b3;
            }
        }

        &.mrz-disabled {
            &.el-button {
                // 清除el-button自带外边距
                margin: 0 !important;
                // 显示鼠标禁用标识
                cursor: not-allowed;
                background-color: #F7F7F7;
                color: #999999;
                border-color: #F7F7F7;
            }
        }
    }
}

// 基础主要按钮样式
.mrz-btn-primary {
    &.el-button {
        // 清除el-button自带外边距
        margin: 0 !important;
        background-color: #4a90e2;
        border-color: #4a90e2;
        color: #ffffff;

        &:hover {
            background-color: #3c78c6;
            border-color: #3c78c6;
        }
    }

    &.mrz-disabled {
        &.el-button {
            // 清除el-button自带外边距
            margin: 0 !important;
            // 显示鼠标禁用标识
            cursor: not-allowed;
            background-color: #A4C7F0;
            color: #ffffff;
            border-color: #A4C7F0;
        }
    }

    &.mrz-rounded {
        &.el-button {
            border-radius: 20px;
        }
    }

    &.mrz-plain {
        &.el-button {
            // 清除el-button自带外边距
            margin: 0 !important;
            border-color: #4a90e2;
            color: #4a90e2;
            background-color: transparent;

            &:hover {
                background-color: #4a90e2;
                color: #ffffff;
            }
        }

        &.mrz-disabled {
            &.el-button {
                // 清除el-button自带外边距
                margin: 0 !important;
                // 显示鼠标禁用标识
                cursor: not-allowed;
                background-color: #ECF5FF;
                color: #a0cfff;
                border-color: #ECF5FF;
            }
        }
    }
}

// 基础成功按钮样式
.mrz-btn-success {
    &.el-button {
        // 清除el-button自带外边距
        margin: 0 !important;
        background-color: #6fcf97;
        border-color: #6fcf97;
        color: #ffffff;

        &:hover {
            background-color: #5dbd84;
            border-color: #5dbd84;
        }
    }

    &.mrz-disabled {
        &.el-button {
            // 清除el-button自带外边距
            margin: 0 !important;
            // 显示鼠标禁用标识
            cursor: not-allowed;
            background-color: #B7E7CB;
            color: #ffffff;
            border-color: #B7E7CB;
        }
    }

    &.mrz-rounded {
        &.el-button {
            border-radius: 20px;
        }
    }

    &.mrz-plain {
        &.el-button {
            // 清除el-button自带外边距
            margin: 0 !important;
            border-color: #6fcf97;
            color: #6fcf97;
            background-color: transparent;

            &:hover {
                background-color: #6fcf97;
                color: #ffffff;
            }
        }

        &.mrz-disabled {
            &.el-button {
                // 清除el-button自带外边距
                margin: 0 !important;
                // 显示鼠标禁用标识
                cursor: not-allowed;
                background-color: #f0f9eb;
                color: #b3e19d;
                border-color: #f0f9eb;
            }
        }
    }
}

// 基础信息按钮样式
.mrz-btn-info {
    &.el-button {
        // 清除el-button自带外边距
        margin: 0 !important;
        background-color: #56cfe1;
        border-color: #56cfe1;
        color: #ffffff;

        &:hover {
            background-color: #3dbdc6;
            border-color: #3dbdc6;
        }
    }

    &.mrz-disabled {
        &.el-button {
            // 清除el-button自带外边距
            margin: 0 !important;
            // 显示鼠标禁用标识
            cursor: not-allowed;
            background-color: #AAE7F0;
            color: #ffffff;
            border-color: #AAE7F0;
        }
    }

    &.mrz-rounded {
        &.el-button {
            border-radius: 20px;
        }
    }

    &.mrz-plain {
        &.el-button {
            // 清除el-button自带外边距
            margin: 0 !important;
            border-color: #56cfe1;
            color: #56cfe1;
            background-color: transparent;

            &:hover {
                background-color: #56cfe1;
                color: #ffffff;
            }
        }

        &.mrz-disabled {
            &.el-button {
                // 清除el-button自带外边距
                margin: 0 !important;
                // 显示鼠标禁用标识
                cursor: not-allowed;
                background-color: #f4f4f5;
                color: #bcbec2;
                border-color: #f4f4f5;
            }
        }
    }
}

// 基础警警告按钮样式
.mrz-btn-warning {
    &.el-button {
        // 清除el-button自带外边距
        margin: 0 !important;
        background-color: #ffaa4c;
        border-color: #ffaa4c;
        color: #ffffff;

        &:hover {
            background-color: #e6953f;
            border-color: #e6953f;
        }
    }

    &.mrz-disabled {
        &.el-button {
            // 清除el-button自带外边距
            margin: 0 !important;
            // 显示鼠标禁用标识
            cursor: not-allowed;
            background-color: #FFD4A5;
            color: #ffffff;
            border-color: #FFD4A5;
        }
    }

    &.mrz-rounded {
        &.el-button {
            border-radius: 20px;
        }
    }

    &.mrz-plain {
        &.el-button {
            // 清除el-button自带外边距
            margin: 0 !important;
            border-color: #ffaa4c;
            color: #ffaa4c;
            background-color: transparent;

            &:hover {
                background-color: #ffaa4c;
                color: #ffffff;
            }
        }

        &.mrz-disabled {
            &.el-button {
                // 清除el-button自带外边距
                margin: 0 !important;
                // 显示鼠标禁用标识
                cursor: not-allowed;
                background-color: #fdf6ec;
                color: #f0c78a;
                border-color: #fdf6ec;
            }
        }
    }
}

// 基础危险按钮样式
.mrz-btn-danger {
    &.el-button {
        // 清除el-button自带外边距
        margin: 0 !important;
        background-color: #ff6b6b;
        border-color: #ff6b6b;
        color: #ffffff;

        &:hover {
            background-color: #e65a5a;
            border-color: #e65a5a;
        }
    }

    &.mrz-disabled {
        &.el-button {
            // 清除el-button自带外边距
            margin: 0 !important;
            // 显示鼠标禁用标识
            cursor: not-allowed;
            background-color: #FFB5B5;
            color: #ffffff;
            border-color: #FFB5B5;
        }
    }

    &.mrz-rounded {
        &.el-button {
            border-radius: 20px;
        }
    }

    &.mrz-plain {
        &.el-button {
            // 清除el-button自带外边距
            margin: 0 !important;
            border-color: #ff6b6b;
            color: #ff6b6b;
            background-color: transparent;

            &:hover {
                background-color: #ff6b6b;
                color: #ffffff;
            }
        }

        &.mrz-disabled {
            &.el-button {
                // 清除el-button自带外边距
                margin: 0 !important;
                // 显示鼠标禁用标识
                cursor: not-allowed;
                background-color: #fef0f0;
                color: #fab6b6;
                border-color: #fef0f0;
            }
        }
    }
}
